<template>
    <div class="header">
        <div class="backPage" @click="backPage">
            <image class="arrow_left" :src="imgPath('back.png')" v-if="back"></image>
            <text class="back col_fff medium" v-if="back">返回</text>
        </div>
        <text class="title col_fff regular">{{title}}</text>
        <div class="btn-wrapper">
            <text class="settle col_cecece regular" v-if="settle" @click="toSettle">欢迎入驻</text>
            <text class="btn" v-if="save" @click="handleSave">保存</text>
            <text class="btn" v-if="manage" @click="handleManage">管理</text>
            <text class="btn" v-if="address" @click="pushWirteAddress">添加地址</text>
            <text  class="btn" v-if="finish" @click="handleFinish">完成</text>
            <text class="btn" v-if="add">添加</text>
            <text class="btn" v-if="publish" @click="toMyPublic">我的发布</text>
            <image class="search-icon" :src="imgPath('search_white.png')" v-if="search" @click="toSearch"></image>
        </div>
    </div>
</template>

<script>
export default {
  name: 'header',
  props: ['back', 'settle', 'title', 'close', 'save', 'address', 'finish', 'add', 'publish', 'manage', 'search'],
  methods: {
    backPage () { // 返回
      if (this.close) {
        this.$emit('closeDialog')
      } else if (this.back) {
        this.$router.go(-1)
      }
    },
    toSettle () { // 入驻
      this.$router.push('settle')
    },
    pushWirteAddress () { // 添加地址
      this.$router.push('/mine/newAddress')
    },
    handleSave () { // 保存
      this.$emit('doSave')
    },
    toMyPublic () { // 我的发布
      this.$router.push('/mine/myPublic')
    },
    handleManage () { // 管理
      this.$emit('manage')
    },
    handleFinish () { // 完成
      this.$emit('finish')
    },
    toSearch () { // 搜索
      this.$emit('search')
    }
  }
}
</script>

<style scoped>
    .col_fff {
        color: #fff;
    }
    .col_cecece {
        color: #cecece;
    }
    .regular {
        font-family: regular;
    }
    .medium {
        font-family: medium;
    }
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        flex-wrap: wrap;
        flex-direction: row;
        height: 88px;
        background-image: linear-gradient(to right, #2b3040, #7d88a4);
    }
    .backPage {
        width: 200px;
        flex-direction: row;
        align-items: center;
        padding-right: 8px;
        padding-left: 24px;
    }
    .arrow_left {
        width: 24px;
        height: 40px;
        margin-right: 16px;
    }
    .back {
        font-size: 32px;
        line-height: 88px;
    }
    .title {
        width: 350px;
        text-align: center;
        font-size: 36px;
        font-weight: bold;
        line-height: 88px;
    }
    .settle {
        height: 44px;
        padding-left: 16px;
        padding-right: 16px;
        font-size: 28px;
        line-height: 44px;
        background-color: rgba(33, 38, 50, .22);
        border-radius: 22px;
    }
    .btn-wrapper {
        width: 200px;
        padding-right: 24px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }
    .btn{
        text-align: right;
        line-height: 88px;
        font-size: 32px;
        color: #cecece;
        font-family: medium;
    }
    .search-icon {
        width: 42px;
        height: 42px;
    }
</style>
